<template>
  <div>
	  no7
    <!-- <div style="position:relative;">
      <div :style="{height:n_he+n_top+'px'}">
        <img
          src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC8yZTI3YmUwOWY2OGQyZDgwZDI1ZGEzNDhkNWM5YWJiMS05MC53ZWJw.webp"
          width="100%;"
          style="margin-top:-200px;"
        />
      </div>
      <div
        style="width:100%; height:100%;background:rgba(0,0,0,.3);position:absolute; left:0;top:0; padding-top:100px;box-sizing: border-box;"
      >
        <div style="background:#fff; width:100%;padding-top:80px;" ref="ade">
          <div style="width:80%;margin:auto; overflow: hidden;padding-bottom:50px;">
            <div style="width:70%;float:left; padding:20px;box-sizing: border-box;">
              <div style="overflow:hidden;width:100%;">
                <div style="float:left;width:40%;">
                  <img
                    src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMS85M2Q4ZDUwZGFmMmZjYmYwYzI0YmIyOGJmZmQ3ZTZmYi01MzN4NTMzLTkwLndlYnA_p_p100_p_3D.webp"
                    style="width:100%;"
                  />
                </div>
                <div style="float:left;width:60%;padding-left:20px;box-sizing: border-box;">
                  <p style="padding:15px 0px;">法国个人旅游签证【全国受理,拒签退全款】</p>
                  <span
                    style="display: inline-block;padding: 10px 30px 0px 30px;line-height: 30px;border-top: 2px solid #ccc; color:#e04f67;font-size: 25px;"
                  >¥1200.00</span>
                  <div style="width:100%; border-top:1px dashed #ccc;">
                    <p style="line-height:30px;">商品编号： 001001</p>
                    <div style="padding:10px 0px;">
                      <span
                        style="display: inline-block;padding: 0px 30px;line-height: 30px; background:#e04f67;color:#fff;font-size: 25px;"
                      >立即预定</span>
                      <button>+</button>
                      <input type="text" style="width:40px;"/>
                      <button>-</button>
                    </div>
                    <p style="padding-top:50px; font-size:14px;">全国受理,拒签退全款</p>
                  </div>
                </div>
              </div>
              <div style="padding-top:20px;">
                <hr />
                <div>
                  <button @click="btn('描述')">描述</button>
                  <button @click="btn('用户评论')">用户评论 (0)</button>
                </div>
                <div>
                  <mao v-show="type"></mao>
                  <ping v-show="as"></ping>
                </div>
              </div>
            </div>
            <div
              style="width:30%;float:right; padding:50px 0px 0px 0px; box-sizing: border-box"
              class="bj"
            >
              <span
                style="display: block;  text-align: center;background: rgb(224, 79, 103); line-height: 30px;"
              >了解更多</span>
              <div style="padding:10px; box-sizing: border-box">
                <div style="padding-bottom:10px;">
                  <div>
                      <img src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi82ZjAzMzYxODVjMDU3MWU3OGZiMGVlMGVmY2IzODc3ZC0zMDB4MjAwLTkwLndlYnA_p_p100_p_3D.webp" style="width:100%;">
                  </div>
                  <p>法国巴黎六日游</p>
                </div>
                <div style="padding-bottom:10px;">
                  <div>
                      <img src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi82ZjAzMzYxODVjMDU3MWU3OGZiMGVlMGVmY2IzODc3ZC0zMDB4MjAwLTkwLndlYnA_p_p100_p_3D.webp" style="width:100%;">
                  </div>
                  <p>法国巴黎六日游</p>
                </div>
                <div style="padding-bottom:10px;">
                  <div>
                      <img src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi82ZjAzMzYxODVjMDU3MWU3OGZiMGVlMGVmY2IzODc3ZC0zMDB4MjAwLTkwLndlYnA_p_p100_p_3D.webp" style="width:100%;">
                  </div>
                  <p>法国巴黎六日游</p>
                </div>
                <div style="padding-bottom:10px;">
                  <div>
                      <img src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi82ZjAzMzYxODVjMDU3MWU3OGZiMGVlMGVmY2IzODc3ZC0zMDB4MjAwLTkwLndlYnA_p_p100_p_3D.webp" style="width:100%;">
                  </div>
                  <p>法国巴黎六日游</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import mao from "./mao.vue";
import ping from "./ping.vue";
export default {
  components: {
    mao,
    ping
  },
  methods: {
    btn(a) {
      if (a == "描述") {
        this.type = true;
        this.as = false;
        // alert(1)
      } else if (a == "用户评论") {
        this.type = false;
        this.as = true;
      }
    }
  },
  data() {
    return {
      type: true,
      as: false,
       n_he:'',
            n_top:''
    };
  },

    mounted() {
    // this.$nextTick(() => {
    this.n_he = this.$refs.ade.offsetHeight;
    this.n_top = this.$refs.ade.offsetTop;
    //   console.log(this.$refs.sa)
    // });
  }
};
</script>

<style>
</style>